<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*清除默认样式*/
		* {
			margin: 0;
			padding: 0;
		}

		ul {
			list-style: none;
		}

		/*外层大盒子*/
		.carousel {
			position: relative;
			width: 700px;
			height: 360px;
			border: 1px solid #000;
			margin: 100px auto;
		}

		/*无序列表*/
		.carousel ul li {
			position: absolute;
			/*width: 140px;*/
			height: 360px;
			top: 0;
			/*让3d效果中的Z轴出现，设置透视点的距离*/
			perspective: 50000px;
			/*保持内部子元素自己的3D位置*/
			transform-style: preserve-3d;
			/*transform: rotateY(60deg);*/
			/*过渡属性*/
			transition: all 1s ease 0s;
		}

		/*背景图技术*/
		.carousel ul li div {
			position: absolute;
			/*保持和li一样的宽度*/
			width: 100%;
			height: 360px;
			top: 0;
			left: 0;
			background-size: 700px 360px;
		}

		/*设置div的3D位置*/
		.carousel ul li div:nth-child(1) {
			transform: translateZ(180px);
            background-color: red;
		}

		.carousel ul li div:nth-child(2) {
			transform: rotateX(90deg) translateZ(180px);
            background-color: yellow;
		}

		.carousel ul li div:nth-child(3) {
			transform: rotateX(180deg) translateZ(180px);
            background-color: green;
		}

		.carousel ul li div:nth-child(4) {
			transform: rotateX(270deg) translateZ(180px);
            background-color: blue;
		}

		/*li标签的width、left属性以及div的背景定位属性，都跟li标签有关*/
		/*解决方法：JQ中的动态方法*/
		/*按钮*/
		input {
			display: block;
			width: 100px;
			height: 50px;
			margin: 100px auto;
		}
	</style>
</head>

<body>
	<!-- 1、搭建静态结构 -->
	<!-- 1.1外层大盒子 -->
	<div class="carousel">
		<!-- 1.2内层的无序列表 -->
		<ul>
			<!-- 1.3li标签内部需要子元素添加图片 -->
			<!-- 添加的图片作为旋转的内部内容 -->

		</ul>
	</div>
	<!-- 1.4按钮 -->
	<input type="button" value="下一张">

	<!-- 2、利用JQ方法动态添加分割样式 -->
	<script crossorigin="anonymous" integrity="sha384-KcyRSlC9FQog/lJsT+QA8AUIFBgnwKM7bxm7/YaX+NTr4D00npYawrX0h+oXI3a2" src="https://lib.baomitu.com/jquery/1.12.4/jquery.js"></script>
	<script>
		// 5、升级部分，添加任意个数的li标签
		// 使用给ul标签动态添加子元素节点的方法
		// 定义子节点
		var str = "<li><div></div><div></div><div></div><div></div></li>";
		// for循环遍历，给ul添加100个子元素
		for (var i = 0; i < 100; i++) {
			$(".carousel ul").append($(str));
		}
		// 动态添加li标签的width、left属性以及div的背景定位属性
		// 获取元素
		var $lis = $(".carousel ul li");
		// 遍历方法
		$lis.each(function (i) {
			// li的宽度和left
			$(this).css({
				"width": 700 / $lis.length,
				"left": 700 / $lis.length * i,
				// 设置li的不同的延时过渡时间
				"transition-delay": 0.001 * i + "s"
			});
			// div的背景定位
			$(this).find("div").css("background-position", - 700 / $lis.length * i + "px 0");
		});

		// 3、添加按钮的点击事件，实现3D旋转。
		// 谁在转：li标签在旋转，内部的div被带动
		// 每个li中的四个div的位置是一个闭合的正方体的四个面
		// li标签每次旋转90度，逆时针，多个li之前排队旋转
		// 信号量编程
		var sam = 0;
		// 4、函数节流，控制用户随意点击行为
		// 设置一个开关，true表示关闭状态，false表示打开状态
		var lock = false;  //没点击之前锁是打开的
		// 按钮事件
		$("input").click(function () {
			// 判断锁是否是关闭的状态，如果是，不能往下继续进行，退出函数
			if (lock) return;
			// 如果是打开状态，可以往下执行，但是必须在这个位置立即上锁
			lock = true;
			// 信号量减90
			sam -= 90;
			// 让li的角度发生旋转
			$lis.css({
				"transform": "rotateX(" + sam + "deg)"
			});
			// 在运动结束后，必须将锁打开
			// 找到运动结束的时间点
			// 延时器，延时的时间，最后一张图片运动结束的时间
			setTimeout(function () {
				// 将锁打开
				lock = false;
			}, 1000 + 1 * ($lis.length - 1));
		});
	</script>
</body>

</html>